---
title: Kieslysitem
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

'n Veelzijdige kieslysitem ontwerp om in 'n kieslys of navigasielys gebruik te word.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe    | Tipe           | Beskrywing                                                                                                                              |
| ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| LinksIkon     | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item                                                                          |
| aksent        | string         | Spesifiseer die aksentkleur van die kieslysitem. Opsies sluit in: `default`, `danger`, en `placeholder` |
| teks          | string         | Die teksinhoud van die menu-item                                                                                                        |
| ikoonKnoppies | reeks          | 'n Reeks objekte wat bykomende ikoon knoppies wat met die menu-item geassosieer is, voorstel                                            |
| isTooltipOpen | booleaanse     | Beheer die sigbaarheid van die wenk geassosieer met die menu-item                                                                       |
| toetsId       | string         | Die data-testid kenmerk vir toetsdoeleindes                                                                                             |
| onClick       | funksie        | Terugroep funksie wat geaktiveer word wanneer die menu-item geklik word                                                                 |
| klasNaam      | string         | Opsionele naam vir bykomende styl                                                                                                       |

</Tab>
</Tabs>

## Variantes

Die verskillende variante van die kieslysitem komponent sluit die volgende in:

### Bevel

'n Bevelstyl kieslysitem binne 'n kieslys om sleutelbordkortpaaie aan te dui.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe   | Tipe           | Beskrywing                                                              |
| ------------ | -------------- | ----------------------------------------------------------------------- |
| LinksIkon    | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item          |
| teks         | string         | Die teksinhoud van die menu-item                                        |
| firstHotKey  | string         | Die eerste sneltoets geassosieer met die opdrag                         |
| secondHotKey | string         | Die tweede sneltoets geassosieer met die opdrag                         |
| isSelected   | booleaanse     | Indicates whether the menu item is selected or highlighted              |
| onClick      | funksie        | Terugroep funksie wat geaktiveer word wanneer die menu-item geklik word |
| klasNaam     | string         | Opsionele naam vir bykomende styl                                       |

</Tab>
</Tabs>

### Verskuifbaar

'n Skuifbare menu-item komponent ontwerp om in 'n menu of lys gebruik te word waar items geskuif kan word, en bykomende aksies kan uitgevoer word deur ikoon knoppies.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe     | Tipe           | Beskrywing                                                                                                 |
| -------------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
| LinksIkon      | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item                                             |
| aksent         | string         | The accent color of the menu item. It can either be `default`, `placeholder`, and `danger` |
| ikoonKnoppies  | reeks          | 'n Reeks objekte wat bykomende ikoon knoppies wat met die menu-item geassosieer is, voorstel               |
| isTooltipOpen  | booleaanse     | Beheer die sigbaarheid van die wenk geassosieer met die menu-item                                          |
| onClick        | funksie        | Terugroepfunksie wat geaktiveer word wanneer die skakel gekliek word                                       |
| teks           | string         | Die teksinhoud van die menu-item                                                                           |
| isDragDisabled | booleaanse     | Indicates whether dragging is disabled                                                                     |
| klasNaam       | string         | Opsionele naam vir bykomende styl                                                                          |

</Tab>
</Tabs>

### Multi Kies

Verskaf 'n manier om multi-kies funksionaliteit met 'n geassosieerde blokkie te implementeer.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe            | Tipe           | Beskrywing                                                                  |
| --------------------- | -------------- | --------------------------------------------------------------------------- |
| LinksIkon             | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item              |
| teks                  | string         | Die teksinhoud van die menu-item                                            |
| geselekteer           | booleaanse     | Wys of die menu-item geselekteer is (gemerk)             |
| opSeleksieVerandering | funksie        | Terugroep funksie wat geaktiveer word wanneer die blokkie se staat verander |
| klasNaam              | string         | Opsionele naam vir bykomende styl                                           |

</Tab>
</Tabs>

### Multi Kies Profielfoto

‘n Multi-kies menu item met ‘n profielfoto, ‘n blokkie vir seleksie, en tekstuele inhoud.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe            | Tipe        | Beskrywing                                                                   |
| --------------------- | ----------- | ---------------------------------------------------------------------------- |
| profielfoto           | `ReactNode` | Die avatar of ikoon wat aan die linkerkant van die menu-item gewys moet word |
| teks                  | string      | Die teksinhoud van die menu-item                                             |
| geselekteer           | booleaanse  | Wys of die menu-item geselekteer is (gemerk)              |
| opSeleksieVerandering | funksie     | Terugroep funksie wat geaktiveer word wanneer die blokkie se staat verander  |
| klasNaam              | string      | Opsionele naam vir bykomende styl                                            |

</Tab>
</Tabs>

### Navigeer

‘n Menu item wat ‘n opsionele linker ikoon, tekstuele inhoud, en ‘n regter-chevron ikoon het.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe | Tipe           | Beskrywing                                                              |
| ---------- | -------------- | ----------------------------------------------------------------------- |
| LinksIkon  | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item          |
| teks       | string         | Die teksinhoud van die menu-item                                        |
| onClick    | funksie        | Terugvoerfunksie wat geaktiveer word wanneer die menu-item gekliek word |
| klasNaam   | string         | Opsionele naam vir bykomende styl                                       |

</Tab>
</Tabs>

### Kies

'n Selekteerbare menu-item, met opsionele linker inhoud (ikoon en teks) en 'n aanwyser (merk-ikoon) vir die geselekteerde toestand.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe   | Tipe           | Beskrywing                                                              |
| ------------ | -------------- | ----------------------------------------------------------------------- |
| LinksIkon    | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item          |
| teks         | string         | Die teksinhoud van die menu-item                                        |
| geselekteer  | booleaanse     | Wys of die menu-item geselekteer is (gemerk)         |
| gedeaktiveer | booleaanse     | Wys of die menu-item gedeaktiveer is                                    |
| gehover      | booleaanse     | Wys of die menu-item tans oor gehover word                              |
| onClick      | funksie        | Terugvoerfunksie wat geaktiveer word wanneer die menu-item gekliek word |
| klasNaam     | string         | Opsionele naam vir bykomende styl                                       |

</Tab>
</Tabs>

### Kies Avatar

‘n Kiesbare spyskaartitem met ‘n avatar, met opsionele linkerkantinhoud (avatar en teks) en ‘n aanduiding (merk ikoon) vir die geselekteerde toestand.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Eienskappe   | Tipe        | Beskrywing                                                                   |
| ------------ | ----------- | ---------------------------------------------------------------------------- |
| profielfoto  | `ReactNode` | Die avatar of ikoon wat aan die linkerkant van die menu-item gewys moet word |
| teks         | string      | Die teksinhoud van die menu-item                                             |
| geselekteer  | booleaanse  | Wys of die menu-item geselekteer is (gemerk)              |
| gedeaktiveer | booleaanse  | Wys of die menu-item gedeaktiveer is                                         |
| gehover      | booleaanse  | Wys of die menu-item tans oor gehover word                                   |
| toetsId      | string      | Die data-testid kenmerk vir toetsdoeleindes                                  |
| onClick      | funksie     | Terugvoerfunksie wat geaktiveer word wanneer die menu-item gekliek word      |
| klasNaam     | string      | Opsionele naam vir bykomende styl                                            |

</Tab>
</Tabs>

### Kies Kleur

‘n Kiesbare spyskaartitem met ‘n kleurstaal vir scenario’s waar gebruikers ‘n kleur uit ‘n menu wil kies.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe   | Tipe       | Beskrywing                                                                                                                                                                                             |
| ------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| kleur        | string     | Die temakleur wat as ‘n staal in die menu-item gewys moet word. Opsies sluit in: `groen`, `turkoois`, `lug`, `blou`, `pers`, `pienk`, `rooi`, `oranje`, `geel`, `grys` |
| geselekteer  | booleaanse | Wys of die menu-item geselekteer is (gemerk)                                                                                                                                        |
| gedeaktiveer | booleaanse | Wys of die menu-item gedeaktiveer is                                                                                                                                                                   |
| gehover      | booleaanse | Wys of die menu-item tans oor gehover word                                                                                                                                                             |
| variant      | string     | Die variant van die kleurstaal. It can either be `default` or `pipeline`                                                                                                               |
| onClick      | funksie    | Terugvoerfunksie wat geaktiveer word wanneer die menu-item gekliek word                                                                                                                                |
| klasNaam     | string     | Opsionele naam vir bykomende styl                                                                                                                                                                      |

</Tab>
</Tabs>

### Wissel

‘n Menu-item met ‘n geassosieerde skakelaar om gebruikers toe te laat om ‘n spesifieke funksie te aktiveer of deaktiveer

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe          | Tipe           | Beskrywing                                                          |
| ------------------- | -------------- | ------------------------------------------------------------------- |
| LinksIkon           | IkoonKomponent | ‘n Opsionele linker-ikoon gewys voor die teks in die menu-item      |
| teks                | string         | Die teksinhoud van die menu-item                                    |
| geskakel            | booleaanse     | Wys of die skakelaar in die "aan" of "af" toestand is               |
| opWisselVerandering | funksie        | Terugvoerfunksie geaktiveer wanneer die skakelaarstoestand verander |
| wisselGrootte       | string         | Die grootte van die skakelaar. Dit kan óf \        |
| klasNaam            | string         | Opsionele naam vir bykomende styl                                   |

</Tab>
</Tabs>
